<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>优惠购</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
    <link rel="stylesheet" type="text/css" href="style/common.css"/>
    <link rel="stylesheet" type="text/css" href="style/index.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"/>
    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
    <script src="/js/youhui.lazyLoad.js"></script>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <a href="index.html" class="header-logo">
            <img src="http://owtl83r0c.bkt.clouddn.com/logo.jpg"/>
        </a>
        <div class="search-wrapper">
            <input class="input_box" placeholder="搜宝贝" type="text" name="name"/>
            <img src="http://owtl83r0c.bkt.clouddn.com/search.png" />
            <span class="search-mask"></span>
        </div>
        <div class="header-menu">
            <img src="http://owtl83r0c.bkt.clouddn.com/type.png"/>
        </div>
    </div>

    <!-- 头部弹出分类导航 -->
    <div class="category-header-wrapper">
        <ul class="category-header-nav">
            <li th:each="type : ${allTypes}">
                <a th:href="@{type/{typeId} (typeId = ${type.typeId})}" th:text="${type.name}"></a>
            </li>
        </ul>
        <div class="arrow">
            <img src="http://owtl83r0c.bkt.clouddn.com/arrow.png"/>
        </div>
    </div>

    <!--轮换区-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://img.alicdn.com/imgextra/i4/2508158775/TB25tQ3rlUSMeJjy1zjXXc0dXXa_!!2508158775.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="https://img.alicdn.com/imgextra/i1/2508158775/TB2qxQsrgoQMeJjy0FoXXcShVXa_!!2508158775.jpg" />
            </div>
            <div class="swiper-slide">
                <img src="https://img.alicdn.com/imgextra/i1/2508158775/TB2D2BkXcLJ8KJjy0FnXXcFDpXa_!!2508158775.jpg" />
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>


    <!-- 图标分类导航 -->
    <div class="category-icon-nav">
        <div class="category-nav-item" th:each="type : ${types}">
            <a th:href="@{type/{typeId} (typeId = ${type.typeId})}" class="category-icon">
                <img th:src="@{'http://owtl83r0c.bkt.clouddn.com/' + ${type.image}}"/>
            </a>
            <span th:text="${type.name}" class="category-title"></span>
        </div>
    </div>

    <div class="recommend">热销<span class="mark">优惠券</span></div>

    <!-- 商品区 -->
    <div class="commodity-list">
        <div class="commodity-item" th:each="good : ${hotGoods}">
            <a th:href="@{/good/{goodId} (goodId = ${good.goodsId})}" >
                <input type="hidden" id="goodsId" th:value="${good.goodsId}"/>
                <img class="lazy" src="http://owtl83r0c.bkt.clouddn.com/placeholder.gif" th:data="@{${good.image}}" />
                <span th:text="${good.name}" class="commodity-title"></span>
                <div class="commodity-coupon-info">
                    <span th:unless="${#strings.equals(good.price, good.priceDiscount)}">券后</span>
                    <span th:unless="${#strings.equals(good.price, good.priceDiscount)}" class="coupon-price" th:text="${'￥' + good.priceDiscount}"></span>
                    <span th:if="${#strings.equals(good.price, good.priceDiscount)}">原价</span>
                    <span th:if="${#strings.equals(good.price, good.priceDiscount)}" class="coupon-price" th:text="${'￥' + good.price}"></span>
                    <span class="alreadyBuy" th:text="${good.alreadyBuy + '人已买'}"></span>
                </div>
            </a>
            <span class="hot">
                <img src="http://owtl83r0c.bkt.clouddn.com/hot.png" />
            </span>
            <span class="coupon-banner">
                <span class="coupon-banner-left" th:text="${'￥' + good.discount} + '.0'"></span>
                <span class="coupon-banner-right">领券</span>
            </span>
        </div>
    </div>

    <p id="info">没有更多商品</p>

    <div id="loading">
        <img src="http://owtl83r0c.bkt.clouddn.com/loading.gif" />
    </div>

    <div class="to-top">
        <img src="http://owtl83r0c.bkt.clouddn.com/top.png" />
    </div>

    <script src="/js/index.js"></script>
</body>
</html>